/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/
@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use '../container/shared' as container;

@use './motion';

$icon-width-normal: awsui.$size-icon-normal;
$icon-width-medium: awsui.$size-icon-medium;
$icon-margin-left: '(#{awsui.$line-height-body-m} - #{$icon-width-normal}) / -2';
$icon-margin-right-normal: '#{awsui.$space-xxs} + #{awsui.$border-divider-list-width}';
$icon-margin-right-medium: awsui.$space-xs;

// Total space occupied by the expand icon on the left and its margins.
// Useful to keep elements correctly aligned.
$icon-total-space-normal: calc(#{$icon-width-normal} + #{$icon-margin-left} + #{$icon-margin-right-normal});
$icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{$icon-margin-right-medium});

.root {
  @include styles.styles-reset;
  @include styles.text-wrapping;
  display: block;
}

.expand-button {
  outline: none;
}

.icon {
  transform: rotate(-90deg);

  &.expanded {
    transform: rotate(0deg);
  }

  @include styles.with-direction('rtl') {
    transform: rotate(90deg);

    &.expanded {
      transform: rotate(0deg);
    }
  }
}

.icon-container {
  position: relative;
  margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
  // For vertical alignment of text in side navigation items
  &-container {
    margin-inline-end: $icon-margin-right-medium;
  }
}

.wrapper {
  box-sizing: border-box;
  border-block: none;
  border-inline: none;
  inline-size: 100%;
  line-height: awsui.$line-height-body-m;
  text-align: start;

  &-default,
  &-inline,
  &-footer {
    border-block: awsui.$border-divider-section-width solid transparent;
    border-inline: awsui.$border-divider-section-width solid transparent;
  }
  &-navigation {
    // not needed for focus ring compensation, but to keep this variant vertically aligned with other variants when used together
    border-inline-start: awsui.$border-divider-section-width solid transparent;
  }

  &-navigation,
  &-container {
    display: flex;
    font-weight: awsui.$font-weight-heading-s;
  }

  &-default,
  &-inline,
  &-navigation,
  &-footer,
  &-compact {
    color: awsui.$color-text-expandable-section-default;
    @include styles.font-smoothing;
  }

  &-default,
  &-inline,
  &-navigation,
  &-footer {
    font-size: awsui.$font-expandable-heading-size;
    letter-spacing: awsui.$letter-spacing-heading-s;
  }

  &-default {
    padding-block: awsui.$space-scaled-xxs;
    padding-inline-end: awsui.$space-xxs;
    &.header-deprecated {
      padding-inline-start: awsui.$space-xxs;
    }
  }
  &-default,
  &-inline {
    &:not(.header-deprecated) {
      padding-inline-start: $icon-total-space-normal;
    }
    &.wrapper-expanded {
      padding-block-end: awsui.$space-scaled-xxs;
      border-block-end-color: awsui.$color-border-divider-default;
    }
  }

  &-footer {
    padding-block: awsui.$space-scaled-xxs;
  }

  &-footer,
  &-compact {
    padding-inline-end: 0;
    &.header-deprecated {
      padding-inline-start: 0;
    }
    &:not(.header-deprecated) {
      padding-inline-start: $icon-total-space-normal;
    }
  }

  &-container {
    padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
    padding-inline-end: container.$header-padding-horizontal;

    &:not(.wrapper-expanded) {
      // Equal top and bottom padding so standalone header has vertical symmetry.
      padding-block-end: awsui.$space-container-header-top;
    }

    &.wrapper-not-expanded-without-actions {
      padding-block-end: calc(#{awsui.$space-container-header-top} + #{awsui.$space-scaled-xxs});
    }

    &.header-deprecated {
      padding-inline-start: container.$header-padding-horizontal;
    }
    &:not(.header-deprecated) {
      padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
    }

    @include focus-visible.when-visible {
      // HACK: Remediate focus border
      padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
      padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
    }
  }
}

.header {
  /* used in test-utils */

  &-wrapper,
  &-deprecated {
    display: flex;
    font-weight: awsui.$font-weight-heading-s;
  }

  &-wrapper {
    font-size: inherit;
    letter-spacing: inherit;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
  }

  &-actions-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  &-button,
  &-container-button {
    @include focus-visible.when-visible {
      @include styles.focus-highlight(0px);
    }
  }

  &-button {
    box-sizing: border-box;
    display: flex;
    margin-inline-start: calc(-1 * #{$icon-total-space-normal});
  }

  &-container-button {
    margin-inline-start: calc(-1 * #{$icon-total-space-medium});
  }

  &-container {
    inline-size: 100%;
    // The icon-container style is kept for variant='container' and header
    > .icon-container {
      margin-block-start: awsui.$space-expandable-section-icon-offset-top;
    }
  }

  &-navigation {
    > .icon-container {
      display: inline-flex;
      cursor: pointer;
      color: awsui.$color-text-expandable-section-navigation-icon-default;
      border-block: 0;
      border-inline: 0;
      padding-block: 0;
      padding-inline: 0;
      background: transparent;
      outline: none;
      text-decoration: none;
      flex-direction: column;

      &:hover {
        color: awsui.$color-text-expandable-section-hover;
      }

      @include focus-visible.when-visible {
        @include styles.focus-highlight(2px);
      }
    }
  }

  &-text {
    /* used in test-utils */
  }
}

// Make sure that actions can wrap for default expandable section headers.
// The compact variant is used in chart popovers and should not wrap.
:not(.wrapper-compact) > .header-actions-wrapper {
  flex-wrap: wrap;
  column-gap: awsui.$space-xs;
  row-gap: awsui.$space-scaled-xxxs;
}

.content {
  display: none;

  &-default,
  &-inline {
    padding-block: awsui.$space-scaled-xs;
    padding-inline: 0;
  }

  &-footer {
    padding-block: awsui.$space-xs;
    padding-inline: 0;
  }

  &-expanded {
    display: block;
  }

  &-compact {
    padding-inline-start: $icon-total-space-normal;
  }
}

.focusable {
  &:focus {
    outline: none;
    text-decoration: none;
  }

  @include focus-visible.when-visible {
    @include styles.focus-element-without-border(awsui.$border-radius-control-default-focus-ring);
  }
}

.click-target {
  cursor: pointer;
  &:not(.wrapper-container):not(.header-container-button):hover {
    color: awsui.$color-text-expandable-section-hover;
  }
}
